var banner = document.querySelector(".banner");
var imgs = document.querySelector(".imgs");
var w = imgs.children[0].clientWidth;  //当前banner的宽度
var i = 0, j, len = imgs.children.length;   //当前图片的索引
var btn = document.querySelector(".btn");
var dots = document.querySelector(".dots");
var auto = true;
var flag = true;
console.log(len);
var timerId;
imgs.appendChild(imgs.children[0].cloneNode(true));
function move() {
  if (i == len + 1) {
    imgs.style.left = 0;
    i = 1;
  }
  if (i == -1) {
    imgs.style.left = -len * w + "px";
    i = len - 1;
  }
  //改变小点
  for (var k = 0; k < len; k++) {
    dots.children[k].className = "";
  }
  j = i;
  if (j == len) {
    j = 0;
  }
  dots.children[j].className = "dot1";


  animation(imgs, "left", -i * w, 400, function () {
    clearTimeout(timerId);
    if (auto) {
      timerId = setTimeout("move(i++)", 2000);
    }
    flag = true;

  });
}
timerId = setTimeout("move(i++)", 2000);

imgs.onmouseout = function () {
  auto = true;
  timerId = setTimeout("move(i++)", 2000);
}
imgs.onmouseover = function () {
  auto = false;
  clearTimeout(timerId);
}

banner.onmouseover = function () {
  btn.style.display = "block";
}
banner.onmouseout = function () {
  btn.style.display = "none";
}
var left = btn.children[0];
left.onclick = function () {
  if (flag) {
    flag = false;
    clearTimeout(timerId);
    timerId = setTimeout("move(i--)", 0);
  }
}
var right = btn.children[1];
right.onclick = function () {
  clearTimeout(timerId);
  timerId = setTimeout("move(i++)", 0);
}

dots.onclick = function (eve) {
  eve = eve || window.event;
  var target = eve.target || eve.srcElement;
  if (target.tagName == "LI") {
    var index = target.getAttribute("index");
    i = index;
    clearTimeout(timerId);
    timerId = setTimeout(move, 0);
  }
}